<template>
  <view class="container">
    <!-- 第一部分：患者信息 -->
    <view class="section patient-info-section">
      <view class="section-header" @click="patientInfoCollapsed = !patientInfoCollapsed">
        <text class="section-title">{{ t('medical.consent_form') }}</text>
        <view class="header-actions">
          <button class="member-btn" @click.stop="gotoMemberSelect">{{ t('medical.choose_member') }}</button>
          <text class="collapse-arrow">{{ patientInfoCollapsed ? '▼' : '▲' }}</text>
        </view>
      </view>
      
      <view v-show="!patientInfoCollapsed" class="section-content">
        <view class="info-form">
          <!-- 用户名 -->
          <view class="form-row">
            <view class="form-label">{{ t('settings.username') }}</view>
            <input v-model="memberForm.username" class="form-input" :placeholder="t('settings.username')" />
          </view>
          
          <!-- 姓 -->
          <view class="form-row">
            <view class="form-label">{{ t('settings.last_name') }}</view>
            <input v-model="memberForm.last_name" class="form-input" :placeholder="t('settings.enter_last_name')" />
          </view>
          
          <!-- 名 -->
          <view class="form-row">
            <view class="form-label">{{ t('settings.first_name') }}</view>
            <input v-model="memberForm.first_name" class="form-input" :placeholder="t('settings.enter_first_name')" />
          </view>
          
          <!-- 出生日期 -->
          <view class="form-row">
            <view class="form-label">{{ t('settings.birthday') }}</view>
            <picker mode="date" :value="memberForm.date_of_birth" @change="onDateChange">
              <view class="form-picker">
                <text>{{ memberForm.date_of_birth || t('settings.select_birthday') }}</text>
                <text class="arrow">▼</text>
              </view>
            </picker>
          </view>

          <!-- 联系电话 -->
          <view class="form-row">
            <view class="form-label">{{ t('settings.mobile') }}</view>
            <input v-model="memberForm.mobile" class="form-input" :placeholder="t('settings.enter_mobile')" />
          </view>
          
          <!-- 性别 -->
          <view class="form-row">
            <view class="form-label">{{ t('settings.gender') }}</view>
            <picker :range="genderOptions" :value="genderIndex" @change="onGenderChange">
              <view class="form-picker">
                <text>{{ getGenderText(memberForm.gender) }}</text>
                <text class="arrow">▼</text>
              </view>
            </picker>
          </view>
          
          <!-- 地址 -->
          <view class="form-row">
            <view class="form-label">{{ t('settings.address') }}</view>
            <textarea v-model="memberForm.address" class="form-textarea" :placeholder="t('settings.enter_address')" />
          </view>
          
          <!-- 医保机构 -->
          <view class="form-row">
            <view class="form-label">{{ t('settings.medical_insurance') }}</view>
            <input v-model="memberForm.medical_insurance" class="form-input" :placeholder="t('settings.enter_medical_insurance')" />
          </view>
          
          <!-- 职业 -->
          <view class="form-row">
            <view class="form-label">{{ t('settings.profession') }}</view>
            <input v-model="memberForm.profession" class="form-input" :placeholder="t('settings.enter_profession')" />
          </view>
          
        </view>
      </view>
    </view>



    <!-- 固定底部提交按钮 -->
    <view class="fixed-bottom-btn">
      <button class="fill-btn" @click="goToNextStep">{{ t('medical.next_step') }}</button>
    </view>
  </view>
</template>

<script>
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/store/user.js'

export default {
  data() {
    return {
        patientInfoCollapsed: false, // 患者信息折叠状态
        memberInfo: {}, // 会员信息
        memberForm: {
            username: '',
            first_name: '',
            last_name: '',
            date_of_birth: '',
            gender: '',
            address: '',
            medical_insurance: '',
            profession: '',
            mobile: '',
            signature: '',
            signature_url: '',
        },
        saving: false,
    }
  },
  setup() {
    const { t } = useI18n()
    const userStore = useUserStore()
    
    // 动态设置页面标题以支持国际化
    if (typeof uni !== 'undefined' && uni.setNavigationBarTitle) {
      uni.setNavigationBarTitle({
        title: t('medical.patient_info')
      })
    }
    return { t, userStore }
  },
  onReady() {
    // 进入页面时设置国际化标题
    if (typeof this.t === 'function') {
      uni.setNavigationBarTitle({
        title: this.t('medical.patient_info')
      })
    }
  },

  computed: {
    userStore() {
      return useUserStore()
    },
    userInfo() {
      return this.userStore.userInfo
    },
    genderOptions() {
      return [
        this.t('settings.male'),
        this.t('settings.female')
      ]
    },
    genderIndex() {
      const gender = this.memberForm.gender
      if (gender === 1 || gender === 'male') {
        return 0
      } else if (gender === 0 || gender === 'female') {
        return 1
      } else {
        return 0 // 默认值
      }
    }
  },

  onShow() {
    // 设置页面标题
    if (typeof this.t === 'function') {
      uni.setNavigationBarTitle({
        title: this.t('medical.patient_info')
      })
    }
    
    // 监听会员选择事件
    uni.$once('memberSelected', (member) => {
      this.memberInfo = member;
      this.initMemberForm();
    });
    
    // 会员选择兜底 - 从本地存储恢复数据
    const memberKey = 'helper_selected_member';
    const localMember = uni.getStorageSync(memberKey);
    if (localMember && typeof localMember === 'object') {
      this.memberInfo = localMember;
      this.initMemberForm();
      uni.removeStorageSync(memberKey);
    }
    

  },

  methods: {
    // 获取性别文本
    getGenderText(gender) {
      if (gender === 1 || gender === 'male') {
        return this.t('settings.male');
      } else if (gender === 0 || gender === 'female') {
        return this.t('settings.female');
      } else {
        return this.t('settings.not_set');
      }
    },

    // 跳转到下一步 - 病史记录页面
    goToNextStep() {
      // 验证用户信息
      if (!this.memberForm.last_name || !this.memberForm.last_name.trim()) {
        uni.showToast({ 
          title: this.t('settings.enter_last_name'), 
          icon: 'error' 
        });
        return;
      }

      if (!this.memberForm.first_name || !this.memberForm.first_name.trim()) {
        uni.showToast({ 
          title: this.t('settings.enter_first_name'), 
          icon: 'error' 
        });
        return;
      }

      if (!this.memberForm.mobile || !this.memberForm.mobile.trim()) {
        uni.showToast({ 
          title: this.t('settings.enter_mobile'), 
          icon: 'error' 
        });
        return;
      }

      // 保存患者信息到本地存储
      const patientInfo = {
        patient_id: this.memberInfo && this.memberInfo.id ? this.memberInfo.id : null,
        patient_info: {
          ...this.memberForm,
          signature_url: this.memberForm.signature_url || this.memberInfo.signature_url || ''
        }
      };
      
      // 将患者信息存储到本地，供下一步页面使用
      uni.setStorageSync('medical_patient_info', patientInfo);
      
      // 跳转到病史记录页面
      uni.navigateTo({
        url: '/pages/medicine/medical-history'
      });
    },

    // 跳转到会员选择页面
    gotoMemberSelect() {
      const storageKey = 'helper_selected_member';
      uni.removeStorageSync(storageKey);
      uni.navigateTo({
        url: '/pages/order/member-select',
        events: {
          memberSelected: (member) => {
            this.memberInfo = member;
            this.initMemberForm();
            uni.removeStorageSync(storageKey);
          }
        }
      });
    },

    // 初始化用户表单
    initMemberForm() {
      if (this.memberInfo && this.memberInfo.id) {
        this.memberForm = {
          username: this.memberInfo.username || this.memberInfo.name || '',
          first_name: this.memberInfo.first_name || '',
          last_name: this.memberInfo.last_name || '',
          date_of_birth: this.memberInfo.date_of_birth || '',
          gender: this.memberInfo.gender || '',
          address: this.memberInfo.address || '',
          medical_insurance: this.memberInfo.medical_insurance || '',
          profession: this.memberInfo.profession || '',
          mobile: this.memberInfo.mobile || this.memberInfo.member || '',
          signature: this.memberInfo.signature || '',
          signature_url: this.memberInfo.signature_url || ''
        };
      }
    },

    // 日期选择处理
    onDateChange(e) {
      this.memberForm.date_of_birth = e.detail.value;
    },

    // 性别选择处理
    onGenderChange(e) {
      this.memberForm.gender = e.detail.value === 0 ? 1 : 0;
    },


  }
}
</script>

<style scoped>
.container {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 140rpx;
  overflow-x: hidden;
  box-sizing: border-box;
}

.section {
  background: #fafafa;
  margin: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx #eee;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  max-width: calc(100% - 48rpx);
  box-sizing: border-box;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  cursor: pointer;
  user-select: none;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1976d2;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.member-btn {
  background: #007aff;
  color: #fff;
  border-radius: 6px;
  padding: 0 16px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  border: none;
}

.collapse-arrow {
  color: #888;
  font-size: 24rpx;
}

.section-content {
  margin-top: 20rpx;
}

.info-form {
  margin-top: 20rpx;
}

.form-row {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #e3f2fd;
  flex-direction: row;
  margin-bottom: 16rpx;
}

.form-label {
  font-size: 28rpx;
  color: #1976d2;
  font-weight: 600;
  min-width: 160rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.form-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  padding: 12rpx 16rpx;
  border: 1rpx solid #bbdefb;
  border-radius: 8rpx;
  background: #fff;
  transition: border-color 0.3s ease;
  min-width: 0;
  height: 60rpx;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #1976d2;
  outline: none;
}

.form-picker {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 16rpx;
  border: 1rpx solid #bbdefb;
  border-radius: 8rpx;
  background: #fff;
  font-size: 28rpx;
  color: #333;
  transition: border-color 0.3s ease;
  min-width: 0;
  height: 60rpx;
  box-sizing: border-box;
}

.form-picker .arrow {
  color: #1976d2;
  font-size: 24rpx;
}

.form-textarea {
  flex: 1;
  padding: 12rpx 16rpx;
  border: 1rpx solid #bbdefb;
  border-radius: 8rpx;
  background: #fff;
  font-size: 28rpx;
  color: #333;
  transition: border-color 0.3s ease;
  min-width: 0;
  min-height: 80rpx;
  max-height: 120rpx;
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.4;
}

.form-textarea:focus {
  border-color: #1976d2;
  outline: none;
}

.flex-spacer {
  flex: 1;
}

.fixed-bottom-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 16rpx 24rpx 32rpx 24rpx;
  z-index: 100;
  box-shadow: 0 -2rpx 8rpx #eee;
}

.fill-btn {
  width: 100%;
  background: #1976d2;
  color: #fff;
  border-radius: 8rpx;
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  display: block;
}

/* 患者同意声明样式 */
.consent-declaration-section {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.consent-content {
  width: 100%;
  margin-bottom: 24rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  border: 1rpx solid #e9ecef;
}

.consent-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  text-align: justify;
  word-break: break-word;
}

.signature-section {
  width: 100%;
  margin-bottom: 24rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #e9ecef;
}

.signature-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.signature-row:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.signature-label {
  font-size: 28rpx;
  color: #1976d2;
  font-weight: 600;
  min-width: 160rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.signature-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
}

.signature-display {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.signature-image {
  width: 120rpx;
  height: 60rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  background: #fff;
}

.no-signature {
  font-size: 24rpx;
  color: #999;
  font-style: italic;
}

.re-sign-btn {
  background: #1976d2;
  color: #fff;
  border-radius: 8rpx;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  margin-left: 16rpx;
  height: 48rpx;
  line-height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 响应式布局调整 */
@media screen and (max-width: 750rpx) {
  .consent-text {
    font-size: 24rpx;
  }

  .signature-label {
    font-size: 26rpx;
    min-width: 140rpx;
  }

  .signature-value {
    font-size: 26rpx;
  }

  .signature-image {
    width: 100rpx;
    height: 50rpx;
  }

  .re-sign-btn {
    font-size: 22rpx;
    padding: 6rpx 12rpx;
    height: 40rpx;
    line-height: 28rpx;
  }
}

@media screen and (min-width: 751rpx) {
  .consent-text {
    font-size: 28rpx;
  }

  .signature-label {
    font-size: 30rpx;
    min-width: 180rpx;
  }

  .signature-value {
    font-size: 30rpx;
  }

  .signature-image {
    width: 140rpx;
    height: 70rpx;
  }

  .re-sign-btn {
    font-size: 26rpx;
    padding: 10rpx 20rpx;
    height: 56rpx;
    line-height: 36rpx;
  }
}
</style>
